<template>
	<view>
		<view class="header">
			<view class="left">
				<!-- <image src="/pages/static/1.jpg"></image> -->
				<image :src="headImg"></image>
			</view>
			<view class="right">
				<view class="item">
					<text>255</text>
					<text>全部宝贝</text>
				</view>
				<view class="item">
					<text>125</text>
					<text>本店收藏</text>
				</view>
				<view class="item">
					<image src="../../static/erweima.png"></image>
					<text style=" margin-top: 20rpx;">二维码</text>
				</view>
			</view>
		</view>
		<view class="search">
			<input type="text" placeholder="输入关键字搜索" class="input" placeholder-class="place"/>
			<image src="/pages/static/index/search.png" mode="aspectFill"></image>
		</view>
		<view class="goods_list">
			<view class="goods_item" v-for="(item,index) in goodsList" :key="index">
				<image :src="item.image"></image>
			    <view class="name">{{item.name}}</view>
				<view class="price">
					<text>￥{{item.price}}</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {Storage} from '@/static/libs/utils.js'
export default {
	data(){
		return {
			goodsList:[
				{
					image:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa3.att.hudong.com%2F48%2F26%2F300000764046131493264559387.jpg&refer=http%3A%2F%2Fa3.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1624340763&t=988d5455ddb65086bae0b9d85c4211ce',
				    name:'商品名称商品名称商品名 商品名称称',
				    price:'125'
				},
				{
					image:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1423235161,778651989&fm=26&gp=0.jpg',
				    name:'商品名称商品名称商品名 商品名称称',
				    price:'125'
				},
				{
					image:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2684558139,3053721271&fm=11&gp=0.jpg',
				    name:'商品名称商品名称商品名 商品名称称',
				    price:'125'
				},
				{
					image:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2850192608,4132059639&fm=26&gp=0.jpg',
					name:'商品名称商品名称商品名 商品名称称',
					price:'200.00'
				}
			],	
		    headImg:''
		}
	},
	onLoad(){
		this.headImg = Storage.get('avatarUrl')
	},
	methods:{
		
	}
}
</script>
<style lang="scss">
.header {
	margin-left: 28rpx;
    margin-top: 30rpx;
	display: flex;
	flex-direction: row;
	.left {
		image {
			width: 154rpx;
			height: 154rpx;
			border-radius: 10rpx;
		}
	}
	.right {
		width: 100%;
		margin-top: 57rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		margin-left: 49rpx;
		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #1B1B1B;
			line-height: 60rpx;
			image {
				width: 41rpx;
				height: 41rpx;
			}
		}
	}
}
.search {
   position: relative;
   width: 690rpx;
   height: 76rpx;
   margin: 56rpx 30rpx 44rpx;
   image {
   	width: 32rpx;
   	height: 36rpx;
   	position: absolute;
   	left: 222rpx;
   	top: 22rpx;
   }
}
.input {
	 height: 76rpx;
	 background: #FFFFFF;
	 border: 2px solid #EEEEEE;
	 border-radius: 38px;
	 padding-left: 275rpx;
	 .place {
		 font-size: 28rpx;
		 font-family: Source Han Sans CN;
		 font-weight: 400;
		 color: #999999;
	 }
}
.goods_list {
	padding: 0 30rpx;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	.goods_item {
		background: #FFFFFF;
		width: 326rpx;
		margin: 15rpx 0;
		// padding: 10rpx;
		// box-sizing: border-box;
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 28rpx;
		image {
		   width: 326rpx;
			height: 326rpx;
			border-radius: 14rpx;
		}
		.name {
			color: #1B1B1B;
			margin-top: 15rpx;
		}
		.price {
			color: #F61B00;
			margin-top: 15rpx;
		}
	}
}
</style>
